<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="{__STATIC_PATH}layuiadmin/layui/css/layui.css" media="all">
    <script src="{__STATIC_PATH}/layuiadmin/layui/layui.js"></script>
    <script>
        layui.config({
            base: '{__STATIC_PATH}layuiadmin/' //静态资源所在路径
        })
    </script>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-header">数据配置管理</div>
    <div class="layui-card-body">
        <div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title">
                <li class="layui-this">背景图设置</li>
                <li>首页消息设置</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form" style="padding: 20px 30px 0 0;">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <img id="background_img_url" src="{$arr_data['background_img']['content_url']}"
                                         height="100" style="margin-bottom: 10px;"><br>
                                    建议尺寸：1280*720
                                    <button type="button" class="layui-btn" id="background_img_btn">
                                        <i class="layui-icon">&#xe67c;</i>点击上传背景图
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-form" style="padding: 20px 30px 0 0;">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <textarea name="home_message" style="width: 500px;" placeholder="请输入公告内容" class="layui-textarea">{$arr_data['home_message']['content']}</textarea>
                                <button type="button" lay-filter="form-home-message" class="layui-btn" lay-submit lay-filter="layuiadmin-app-form-submit">保存
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        layui.extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'form', 'upload','layer'], function () {
            var $ = layui.$, form = layui.form;
            var admin = layui.admin;
            var upload = layui.upload;
            var layer = layui.layer;
            upload.render({
                elem: '#background_img_btn'
                , url: '/admin/file/uploadImage'
                , field: 'image'
                ,before: function(obj){
                    layer.load();
                }
                , done: function (res) {
                    layer.closeAll();
                    if (res.code == 0) {
                        $("#background_img_url").attr('src', res.data.url);
                        setConfig('background_img', res.data.file_id);
                    } else {
                        return layer.msg('上传失败');
                    }
                }
                , error: function () {
                    layer.closeAll();
                    var demoText = $('#test-upload-demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败，请重新上传</span>');
                }
            });

            //首页消息
            form.on('submit(form-home-message)', function(data){
                setConfig('home_message',data.field.home_message);
            });
            function setConfig(str_key, str_content) {
                admin.req({
                    url: "/admin/system/setConfigData"
                    , type: "POST"
                    , data: {key: str_key, content: str_content}
                    , datatype: 'json'
                    , success: function (res) {
                        if (res.code == 0) {
                            layer.msg('设置成功');
                        } else {
                            layer.msg('设置失败');
                        }
                    }
                });
            };
        })
    </script>
</body>
</html>